<%--
  Created by IntelliJ IDEA.
  User: WangWeiwei
  Date: 16-10-24
  Time: 下午3:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<div class="row">
    <div class="col-lg-6">
        <div class="form-group has-error">
            <input id="add-goods-goods-name" class="form-control" type="text" placeholder="商品名"/>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <select about="add-goods"
                id="add-goods-select-goods-type1"
                class="form-control select select-primary select-block mbl span6"
        >
            <option value="-1">请选择基本商品类型</option>
            <optgroup for="type" label="商品类型">
            </optgroup>
        </select>
        <select style="margin-left: 70px;"
                about="add-goods"
                id="add-goods-select-goods-type2"
                class="form-control select select-primary select-block mbl span6"
        >
            <option value="-1">请选择详细类型</option>
            <optgroup for="type" label="商品类型">
            </optgroup>
        </select>
    </div>
</div>
<script>
    $(function () {
        $("select[about='add-goods']").select2({dropdownCssClass: 'dropdown-inverse'});

        /**设置商品类型选择器的内容*/
        function setSelectType(selectObj, list) {
            var HTML = "";
            for (var i in list) {
                HTML += "<option value='" + list[i].id + "' " +
                        "index='" + id + "'>" +
                        list[i].name +
                        "</option>"
            }
            selectObj.find("optgroup").html(HTML);
        }


        /**设置商品类型选择器*/
        function selectTypeValue(selectObj, data) {
            setSelectType(selectObj, data.goodsTypeList);
            //当第一个选择器选择内容后,自动替换第二个选择器的内容
            $("#add-goods-select-goods-type1").change(function () {
                setSelectType($("#add-goods-select-goods-type2"),
                        data.goodsTypeList[$(this).attr("index")].goodsTypes);
            })
        }

        /**为选择框的选项赋值*/
        function requestSelectValue() {
            $.getJSON("${basePath}/goods/goodsAtribute/all", function (data) {
                selectTypeValue($("#add-goods-select-goods-type1"), data);
                setMultipleSelectValue(data.cropList, data.symptonList);
            })
        }

        /**向服务器发起请求,获取全部商品类型*/
        requestSelectValue();


    })
</script>
<div class="row" style="margin-left: 1px;">
    <select id="add-goods-crops"
            multiple="multiple"
            class="form-control multiselect multiselect-info"
            about="add-goods">
        <option value="-1" selected>适用作物</option>
    </select>
    <a href="#" class="text-info">
        <span class="glyphicon glyphicon-plus"></span>
    </a>
    <select id="add-goods-sympton"
            style="margin-left: 70px;"
            multiple="multiple"
            class="form-control multiselect multiselect-info"
            about="add-goods">
        <option value="-1" selected>作用症状</option>
    </select>
    <a href="#" class="text-info">
        <span class="glyphicon glyphicon-plus"></span>
    </a>
</div>
<script>
    /**为多选输入框赋值*/
    function setMultipleSelectValue(cropList, symptonList) {
        function setView(obj, list) {
            var HTML;
            for (var i in list) {
                HTML += "<option value='" + list[i].id + "'>" + list[i].name + "</option>"
            }
            obj.append(HTML);
        }

        setView($("#add-goods-sympton"), symptonList);
        setView($("#add-goods-crops"), cropList);
    }
</script>
<div class="row" style="margin-top: 20px;">
    <div class="col-lg-6">
        <input class="form-control" type="text" placeholder="规格"/>
    </div>
</div>
<div class="row" style="margin-top: 20px;">
    <div class="col-lg-6">
        <input class="form-control" type="text" placeholder="条码"/>
    </div>
</div>
<div class="row" style="margin-top: 20px;">
    <div class="col-lg-6">

        <div class="form-group has-success">
            <input class="form-control" placeholder="生产厂商" type="text"
                   id="add-goods-productor"/>
        </div>
        <div id="selectedItems"></div>
        <input id="selectedRecipients" type="hidden"/>
    </div>
    <script>
        $(function () {

            /*** 1.远程数据示例 ***/
            var states = new Bloodhound({
                datumTokenizer: function () {
                    return Bloodhound.tokenizers.obj.whitespace("word")
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                // 在文本框输入字符时才发起请求
                remote: {
                    url: "${basePath}/goods/productors/search?param=%QUERY",
                    wildcard: '%QUERY'
                },
                limit: 10
            });

            states.initialize();

            $('#add-goods-productor').typeahead(null,
                    {
                        name: 'states',
                        displayKey: 'word',
                        source: states.ttAdapter()
                    }).on('typeahead:selected', function (e, datum) {
                var selectItemVal = $('#add-goods-productor').val().substr(0, $("#selectedRecipients").val().length - 2);
                $("#selectedItems").append("<span class='label label-primary' style='cursor:pointer' onclick='removeSelected(this," + datum["rkey"] + ")'><span class='glyphicon glyphicon-minus' aria-hidden='true'></span> " + datum["word"] + "</span> ");
                $('#add-goods-productor').blur();
            });

        });
        //移除已选择项
        function removeSelected(opt, removeId) {
            $(opt).remove();
            var selectRkey = $("#selectedRecipients").val();
            var arr = selectRkey.split("@@");
            var arr2 = $(arr).map(function (ind, val) {
                if (parseInt(val) == parseInt(removeId)) {
                    //arr.remove
                } else {
                    return val;
                }
            }).get().join("@@");
            $("#selectedRecipients").val(arr2);
        }
    </script>
</div>
